<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>产品详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="/css/mui.min.css">
		<link rel="stylesheet" href="/css/style.css">
		<style>
			#description img{
				width: 100%;
			}
		</style>
	</head>
	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<button id="headerBacker" class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>首页
			</button>
			<h1 class="mui-title">{{$categoryTitle}}</h1>
		</header>
		<div class="mui-content">
			<img id="img1" src="{{$product['cover']}}" class="mui-hidden" />
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group">
					<div class="mui-slider-item">
						<a href="#">
							<img src="{{$product['cover']}}">
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="{{$product['cover']}}">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<div class="mui-content-padded">
				<div>
					<p><span class="price-first">¥ {{$product['original_price']}}</span></p>
					<p style="color: #333; font-size: 18px;">{{$product['name']}}</p>
					<p style="color: #555; font-size: 10px;">
						{{$product['summary']}}
					</p>
				</div>
				<div class="title">
					产品详情
				</div>
				<div style="margin: 10px 0 15px 0;" id="description">
					<p>
						{!! $product['description'] !!}
					</p>
				</div>
				<div class="title">
					用户好评
				</div>
				<ul class="mui-table-view">
					@foreach($comments as $comment)
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="{{$comment['head_img']}}">
								<div class="mui-media-body">
									{{$comment['title']}}
									<p>{{$comment['content']}}</p>
								</div>
							</a>
						</li>
					@endforeach

				</ul>
			</div>
			<div class="mui-content-padded footer">
				<p>
					--- 已经到底喽 ---
				</p>
			</div>
		</div>
		<div class="message bottom">
			<div class="action">
				<button id="order" type="button" class="mui-btn mui-btn-blue" style="width: 200px;" >立即预约</button>
			</div>
		</div>
		<script src="/js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true
			});
			
			mui('body').on('tap', '#order', function () {
				//window.location = 'order_create.html';
                mui.alert('对不起，目前该产品只支持使用优惠劵预约。');
			});

		</script>
	</body>
</html>
